<template>
  <div class="main-container">
    <n-card
        :title="'📖任务计时'"
    >
      <template #header-extra>
        <n-switch v-model:value="recordSwitchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <div v-show="!recordSwitchValue">
        <n-tabs type="line" size="small" :tabs-padding="1" pane-style="padding: 1px;" v-model:value="recordTabValue">
          <n-tab-pane name="记录面板">
            <RecordTimeLog v-model="recordTimeInfo"></RecordTimeLog>
          </n-tab-pane>
          <n-tab-pane name="日志列表">
            <TaskLogList></TaskLogList>
          </n-tab-pane>
          <n-tab-pane name="当日统计">
            <TaskLogSemiCircle :key="recordTabKey"></TaskLogSemiCircle>
          </n-tab-pane>
        </n-tabs>
      </div>
    </n-card>
    <n-card  title="📖生活模式">
      <template #header-extra>
        <n-switch v-model:value="surfaceSetting.lifeItemSwitchValue2">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <LifeModeItems v-show="!surfaceSetting.lifeItemSwitchValue2"></LifeModeItems>
    </n-card>
    <n-card  title="📖inbox">
      <template #header-extra>
        <n-switch v-model:value="surfaceSetting.inboxSwitchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <n-input
          v-show="!surfaceSetting.inboxSwitchValue"
          v-model:value="surfaceSetting.inbox"
          type="textarea"
          placeholder="基本的 Textarea"
          rows="10"
      />
    </n-card>
    <n-card  title="📖任务面板" size="large">
      <template #header-extra>
        <n-button @click="addNewTaskPanel" type="primary" dashed>添加新看板</n-button>
      </template>
      <n-space vertical size="large">
        <template v-for="(data, index) in useSurfaceSetting.getSurfaceSetting().taskPanels" :key="index">
          <!--        <n-collapse style="width: 100%" v-model:expanded-names="useSurfaceSetting.getSurfaceSetting().taskPanelExpandNames">-->
          <!--          <n-collapse-item :title="data.name" :name="index.toString()">-->
          <!--            -->
          <!--          </n-collapse-item>-->
          <!--        </n-collapse>-->
          <SingleTaskBoard :index="index" :PanelName="data.name" :type="1"></SingleTaskBoard>
        </template>
      </n-space>
    </n-card>
    <ModalDialog ref="modalDialogRef" @confirm="onDataFormConfirm">
      <template #content>
        <DataForm ref="dataFormRef" :options="formItems" :form-config="formConfig"/>
      </template>
    </ModalDialog>
  </div>

</template>
<script lang="ts" setup>
import {FormProps, NInput, NSpace, SelectOption, useMessage} from "naive-ui";
import {computed, h, nextTick, onBeforeMount, onMounted, reactive, ref} from "vue";
import TaskList from "@/views/task/TaskList.vue";
import {post, Response} from "@/api/http";
import RecordTimeLog from "@/views/taskoperation/recordTime/RecordTimeLog.vue";
import {addLifeMode, getFieldSelect, getGoalSelect, getTaskPanelHeadInfo, getTaskRecordInfo} from "@/api/url";
import useUserStore from "@/store/modules/user";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import {DataFormType, FormItem, ModalDialogType} from "@/types/components";
import {renderSelect, renderTimePicker} from "@/hooks/form";
import SingleTaskBoard from "@/views/taskoperation/recordTime/SingleTaskBoard.vue";
import LifeModeItems from "@/views/lifeMode/lifeModeList/LifeModeItems.vue";
import TaskLogList from "@/views/taskoperation/tasklog/TaskLogList.vue";
import TaskLogCircle from "@/views/taskoperation/tasklog/TaskLogSemiCircle.vue";
import DataForm from "@/components/common/DataForm";
import ModalDialog from "@/components/common/ModalDialog.vue";
import TaskLogSemiCircle from "@/views/taskoperation/tasklog/TaskLogSemiCircle.vue";
const userStore = useUserStore()
const message = useMessage();
const useSurfaceSetting = UseSurfaceSettingStore()

// import lifeModelItemsShow from '../lifeModel/lifeModelList/lifeModelItemsShow.vue'
// import taskOperationList from './taskOperation/taskOperationList.vue'
// import TempTaskList from './TempTaskList.vue'
const surfaceSetting = useSurfaceSetting.getSurfaceSetting()
const recordSwitchValue = ref(false)


const recordTimeInfo = reactive({
  key:Date.now()
})

const goalSelect:Array<any> = [];
const getGoalSelectFromBack = async ()=>{
  try {
    const data: Response = await post({
      url: getGoalSelect,
      data: {haveFinish:false},
      token:userStore.getToken()
    });
    // console.log(data.data.data)
    goalSelect.splice(0);
    goalSelect.push(...data.data.data)
    // console.log(goalSelect)
  }catch(e) {
    message.error((e as Error).message)
  }finally {
  }
}

// 表单
const formConfig = {
  labelWidth: 100,
  size: 'medium',
  labelAlign: 'right',
} as FormProps
const modalDialogRef = ref<ModalDialogType | null>(null)
const dataFormRef = ref<DataFormType | null>(null)
async function onDataFormConfirm() {
  if (dataFormRef.value?.validator()) {
    modalDialogRef.value?.toggle()
    const params = {...dataFormRef.value.generatorParams()}
    console.log(params)
    useSurfaceSetting.getSurfaceSetting().taskPanels.push(params)
  }
}
const formItems = [
  {
    label: '名称',
    key: 'name',
    value: ref(null),
    validator: (formItem, message) => {
      if (!formItem.value.value) {
        message.error('请输入角色名称')
        return false
      }
      return true
    },
    render: (formItem) => {
      return h(NInput, {
        value: formItem.value.value,
        onUpdateValue: (val) => {
          formItem.value.value = val
        },
        placeholder: '请输入角色名称',
      })
    },
  },
  {
    label: '目标',
    key: 'goalIds',
    value: ref(useSurfaceSetting.getSurfaceSetting().showGoalId[0]),
    optionItems: goalSelect,
    reset:(formItem)=>{
      formItem.value.value =''
    },
    render: (formItem) =>
        renderSelect(formItem.value, formItem.optionItems as SelectOption[], {
          placeholder: '请选择会议类型',
          clearable: true,
          filterable:true,
          multiple:true
        }),
  },

] as FormItem[]

// onBeforeMount(getGoalSelectFromBack)
const addNewTaskPanel = async ()=>{
  modalDialogRef.value?.toggle()
  await getGoalSelectFromBack()
  nextTick(() => {
    dataFormRef.value?.reset()
  })
}

const recordTabValue = ref("记录面板")
const recordTabKey = computed(()=>{
  if(recordTabValue.value === '当日统计') return Date.now();
  else return 0;
})
</script>

<style scoped>
.n-text {
  font-size: 18px;
}
</style>
